<template>
    <div>
        <h3>{{ this.$store.state.subject }}</h3>
        <table
                width="100%"
                border="0"
                cellspacing="1"
                cellpadding="4"
                bgcolor="#cccccc"
                class="tabtop13"
                align="center"
        >
            <tr></tr>
            <tr>
                <td>保险类型</td>
                <td v-for="gt in guarantees">{{ gt.context }}</td>
                <td>价格</td>
            </tr>
            <tr v-for="ins in insurances">
                <td>{{ ins.insuranceName }}</td>
                <td v-for="inc in ins.insGuas">{{ inc.insuranceMoney }}</td>
                <td>
                    {{ ins.insurancePrice }}
                </td>

            </tr>
        </table>
        <br><br>
        <div>
            <el-row type="flex" align="middle" justify="flex-start" style="height: 100px">
                <el-select v-model="insurance" value-key="insuranceId" placeholder="请选择车险套餐" style="margin-right: 100px">
                    <el-option
                            v-for="ins in incs"
                            :key="ins.insuranceId"
                            :label="ins.insuranceName"
                            :value="ins">
                    </el-option>
                </el-select>
                <el-card class="box-card" style="color: #ff4d51;background-color: #85ce61;box-shadow: #99a9bf">
                    <div class="text item" style="font-size: 38px">
                        {{'网销优惠价：' + this.insurance.insurancePrice }}
                    </div>
                </el-card>
            </el-row>
        </div>
        <br><br>
        <div style="flex: fit-content">
            <h4>是否选用我的车辆(默认为否)</h4>
            <el-switch
                    v-model="b"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
        </div>

        <div v-if="b===true">
            <h4>我的车辆</h4>
            <el-select v-model="mycar" value-key="id" placeholder="请选择我的车辆">
                <el-option
                        v-for="item in carList"
                        :key="item.id"
                        :label="item.id"
                        :value="item">
                </el-option>
            </el-select>
        </div>

        <div v-if="b===false">
            <el-row type="flex" align="middle" justify="space-between" style="height: 180px">
                <el-col :span="12">
                    <h4>车牌号：</h4>
                    <car-plate-keyboard v-bind:value="carOrderReq.carOrder.carId" @submit="submitcarid"></car-plate-keyboard>
                </el-col>
                <el-col :span="12">
                    <span>核定座位数：</span>
                    <el-input v-model='carOrderReq.carOrder.seatNumber' placeholder="核定座位数"></el-input>
                </el-col>
            </el-row>
            <el-row type="flex" align="middle" justify="flex-start" style="margin-bottom: 30px">
                <span>车辆类型：</span>
                <el-select v-model="carOrderReq.carOrder.carType" placeholder="请选择车型">
                    <el-option label="小型车" value="小型车"></el-option>
                    <el-option label="中型车" value="中型车"></el-option>
                    <el-option label="大型车" value="大型车"></el-option>
                </el-select>
            </el-row>
        </div>

        <div>
            <el-row>
                <h3>投保人信息</h3>
                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="真实姓名" prop="ph_name">
                            <el-input v-model="carOrderReq.policyHolder.phName" ></el-input>
                        </el-form-item>
                    </el-form>
                </div> </el-col>
                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="身份证号">
                            <el-input v-model="carOrderReq.policyHolder.phIdcard" ></el-input>
                        </el-form-item>
                    </el-form>
                </div></el-col>
                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="性别">
                            <el-select v-model="carOrderReq.policyHolder.phGender" placeholder="请选择性别" style="width: 100%;">
                                <el-option label="男" value="man"></el-option>
                                <el-option label="女" value="wemen"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div></el-col>

                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="出生日期">
                            <el-col :span="11">
                                <el-date-picker  type="datetime"
                                                 value-format="yyyy-MM-dd HH:mm:ss"
                                                 default-time="00:00:00"
                                                 placeholder="出生日期"
                                                 v-model="carOrderReq.policyHolder.phBirthday"
                                                 style="width: 218%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div> </el-col>

                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="所在地区" prop="ph_place">
                            <el-input v-model="carOrderReq.policyHolder.phPlace"></el-input>
                        </el-form-item>
                    </el-form>
                </div> </el-col>

                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="手机号码" prop="ph_phone">
                            <el-input v-model="carOrderReq.policyHolder.phPhone"></el-input>
                        </el-form-item>
                    </el-form>
                </div> </el-col>
                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.policyHolder" label-width="150px">
                        <el-form-item label="邮箱" prop="ph_email">
                            <el-input v-model="carOrderReq.policyHolder.phEmail"></el-input>
                        </el-form-item>
                    </el-form>
                </div></el-col>
            </el-row>
            <el-row>
                <h3>被投保人信息</h3>
                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.insured" label-width="150px">
                        <el-form-item label="真实姓名" prop="is_name">
                            <el-input v-model="carOrderReq.insured.inName" ></el-input>
                        </el-form-item>
                    </el-form>
                </div> </el-col>

                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.insured" label-width="150px">
                        <el-form-item label="与投保人关系">
                            <el-select v-model="carOrderReq.insured.inRelationship"  style="width: 100%;">
                                <el-option label="本人" value="本人"></el-option>
                                <el-option label="子女" value="子女"></el-option>
                                <el-option label="父母" value="父母"></el-option>
                                <el-option label="配偶" value="配偶"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div></el-col>

                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.insured" label-width="150px">
                        <el-form-item label="证件号码" prop="is_idcard">
                            <el-input v-model="carOrderReq.insured.inIdcard"></el-input>
                        </el-form-item>
                    </el-form>
                </div> </el-col>
                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.insured" label-width="150px">
                        <el-form-item label="性别">
                            <el-select v-model="carOrderReq.insured.inGender" placeholder="请选择性别" style="width: 100%;">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div></el-col>

                <el-col :span="12"><div class="form-box">
                    <el-form ref="form" :model="carOrderReq.insured" label-width="150px">
                        <el-form-item label="出生日期">
                            <el-col :span="11">
                                <el-date-picker type="datetime"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                default-time="00:00:00"
                                                placeholder="出生日期"
                                                v-model="carOrderReq.insured.inBirthday"
                                                style="width: 218%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div> </el-col>

            </el-row>
        </div>
        <el-row type="flex" align="middle" justify="flex-start" >
            <el-button type="primary" @click="submit()">确认购买</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    // name: "car",
    data() {
        return {
            mycar:{

            },
            carList: [],
            b:false,
            guarantees: [],
            insurances: [],
            incs: [],
            insurance: {},
            carOrderReq: {
                combined: {
                    id: this.$store.state.insuranceid
                },
                carOrder: {
                    orderId: null,
                    uid: this.$store.state.id,
                    phId: null,
                    inId: null,
                    insuranceId: null,
                    beginDay: null,
                    endDay: null,
                    carId: "粤SU9H766",
                    seatNumber: 5,
                    carType: "小型车",
                    earnedWay: "法定",
                    carOrderStatus: null
                },
                bxOrder: {
                    subject: null,
                    totalAmount: null,
                    orderStatus: null,
                    createTime: null,
                    lastTime: null,
                    updateTime: null
                },
                policyHolder: {
                    phName: "刘思博",
                    phIdcard: "423213124131",
                    phGender: "男",
                    phBirthday: null,
                    phPlace: "东莞",
                    phPhone: "18925540371",
                    phEmail: "liusibo61@foxmail.com"
                },
                insured: {
                    inName: "红米",
                    inRelationship: "父母",
                    inIdcard: "423213124131",
                    inGender: "男",
                    inBirthday: null
                }
            }
        }
    },
    created() {
        this.initInsurance();
        this.getmycar();
    },
    methods: {
        initInsurance() {
            const vm = this;
            this.axios({
                method: "get",
                url: "/myapi/admin/combined/listComInsCov/" + vm.$store.state.insuranceid,
            })
                    .then((response) => {
                        console.log("获取数据成功", response);
                        vm.insurances = response.data.content.insurances;
                        vm.guarantees = response.data.content.guarantees;
                        vm.incs = response.data.content.insurances;
                    })
                    .catch((error) => {
                        console.log("获取数据失败", error);
                    });
        },
        submitcarid(e){
            this.carOrderReq.carOrder.carId = e;
        },
        submit(){
            if(this.$store.state.token === ""){
                this.$message.error("请先登陆!");
                this.$router.push("/login");
            }
            else {
                const vm = this;
                this.carOrderReq.bxOrder.totalAmount = this.insurance.insurancePrice;
                this.carOrderReq.bxOrder.subject = this.$store.state.subject;
                this.carOrderReq.carOrder.insuranceId = this.insurance.insuranceId;
                if (vm.b === true) {
                    vm.carOrderReq.carOrder.carId = vm.mycar.id;
                    vm.carOrderReq.carOrder.seatNumber = vm.mycar.seatNumber;
                    vm.carOrderReq.carOrder.carType = vm.mycar.carType;
                }
                this.axios({
                    method: "post",
                    url: "/myapi/user/order/createOrder",
                    data: vm.carOrderReq
                })
                        .then((response) => {
                            this.$router.push({path: "/home/pay/" + response.data.content + "/1"});
                        })
                        .catch((error) => {
                            console.log("失败", error);
                        });

            }
        },
        getmycar(){
            let vm = this;
            this.axios({
                url: '/myapi/user/car/getCar/'+vm.$store.state.id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.carList = response.data.content;
                    console.log(vm.carList);
                }
                else {
                    vm.$message.error('获取列表失败');
                }
            });
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}
.tabtop13 {
    margin-top: 13px;
    width: 800px;
}
.tabtop13 td {
    background-color: #ffffff;
    height: 25px;
    line-height: 150%;
}
.font-center {
    text-align: center;
}
</style>
